<template>
  <view class="container">
    <uni-nav-bar
      :border="false"
      statusBar
      title="登记"
      color="#1F1F1F"
      left-icon="left"
      @clickLeft="onBack"
    >
    </uni-nav-bar>
    <view class="formBox">
      <uni-forms
        ref="valiForm"
        :rules="rules"
        v-model="formData"
        :border="true"
        label-position="top"
        :label-width="100"
      >
        <uni-forms-item label="人脸照片" required name="facialId">
          <view class="faceImg" @click="$noMultipleClicks(onFaceImg)">
            <image class="img" :src="faceImg" v-if="faceImg" />
            <uni-icons
              type="plusempty"
              size="30"
              color="#ccc"
              v-else
            ></uni-icons>
          </view>
        </uni-forms-item>
        <uni-forms-item label="编号" required name="clothCode">
          <uni-easyinput
            :disabled="query.clothCode && true"
            v-model="formData.clothCode"
            placeholder="请输入"
          />
        </uni-forms-item>
        <uni-forms-item label="姓名" required name="personnelName">
          <uni-easyinput
            v-model="formData.personnelName"
            placeholder="请输入"
          />
        </uni-forms-item>
        <uni-forms-item label="部门单位" required name="deptId">
          <uni-data-picker
            placeholder="请选择部门"
            popup-title="请选择部门"
            :map="{
              text: 'label',
              value: 'id',
            }"
            :localdata="deptData"
            v-model="formData.deptId"
          />
        </uni-forms-item>
        <uni-forms-item label="手机号" name="phone">
          <uni-easyinput v-model="formData.phone" placeholder="请输入" />
        </uni-forms-item>
      </uni-forms>
      <button class="btn" type="primary" @click="onSubmit('valiForm')">
        提交
      </button>
    </view>
  </view>
</template>

<script>
import _ from 'lodash';
import { getDeptTreeList } from '@/api/index';
import {
  getOssImg,
  getLaundryList,
  addLaundryCode,
  editLaundryCode,
} from '@/api/laundry';
export default {
  components: {},
  data() {
    return {
      query: {},
      deptData: [],
      // 表单数据
      formData: {},
      // 规则
      rules: {
        facialId: {
          rules: [
            {
              required: true,
              errorMessage: '请上传人脸照片',
            },
          ],
        },
        deptId: {
          rules: [
            {
              required: true,
              errorMessage: '请选择部门',
            },
          ],
        },
        clothCode: {
          rules: [
            {
              required: true,
              errorMessage: '请填写编号',
            },
          ],
        },
        personnelName: {
          rules: [
            {
              required: true,
              errorMessage: '请填写姓名',
            },
          ],
        },
        phone: {
          rules: [
            {
              required: false,
              errorMessage: '请填写手机号',
            },
            {
              pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
              errorMessage: '请输入正确的手机号码',
            },
          ],
        },
      },
      // app
      faceImg: '',
      // 重复点击，使用noMultipleClicks方法时，需要在当前页面创建此变量
      noClick: true,
    };
  },
  watch: {
    'formData.userId': {
      handler(newVal) {},
      immediate: false,
      deep: true,
    },
  },
  onLoad(query) {
    this.query = query;
    if (query.clothCode) {
      getLaundryList({
        clothCode: query.clothCode,
      }).then((res) => {
        this.formData = res.rows ? res.rows[0] : {};
        this.faceImg = res.rows ? res.rows[0]?.urlPublic : '';
      });
    }
    // 人脸监听函数
    window.faceDetectCallback = (url, id) => {
      this.onFaceDetectCallback(url, id);
    };
    // 初始化数据
    this.initData();
  },
  methods: {
    initData() {
      // 部门tree
      getDeptTreeList().then((res) => {
        this.deptData = res.data;
      });
    },
    // APP
    onFaceImg() {
      if (window.androidSDK && androidSDK) androidSDK.openFaceDetectView();
    },
    onFaceDetectCallback(url, id) {
      getOssImg(id).then((res) => {
        this.faceImg = res.data.urlPublic;
      });
      this.formData.facialId = id;
    },
    // 提交
    onSubmit(ref) {
      this.$refs[ref]
        .validate()
        .then((res) => {
          // loading提示
          uni.showLoading({ title: '操作中' });
          let api = addLaundryCode;
          if (this.query.clothCode) api = editLaundryCode;
          api({
            ...res,
          }).then((r) => {
            uni.hideLoading();
            uni.showToast({
              title: `提交成功`,
            });
            if (window.androidSDK && androidSDK) {
              androidSDK.faceRegister(
                res.clothCode,
                res.personnelName,
                this.faceImg
              );
            }
            // 重置
            this.onReset();
            this.onBack();
          });
        })
        .catch((err) => {
          console.log('err', err);
        });
    },
    // 重置表单
    onReset() {
      this.faceImg = this.$options.data().faceImg;
      this.formData = this.$options.data().formData;
    },
    // 跳转页面
    onLocation(url) {
      uni.navigateTo({
        url,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  min-height: calc(100vh - var(--window-top));
  background: #f2f2f2;
  position: relative;
  display: flex;
  flex-direction: column;
  .formBox {
    padding: 40rpx;
    overflow: hidden;
    .uni-forms {
      padding: 20rpx 36rpx 30rpx;
      background: #fff;
      border-radius: 4rpx;
      box-shadow: 0rpx 3rpx 14rpx 10rpx rgba(198, 223, 255, 0.4);
    }
    .btn {
      margin-top: 40rpx;
    }
    .faceImg {
      width: 100rpx;
      height: 100rpx;
      border: 1rpx solid #ccc;
      border-radius: 5rpx;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      .img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
